Promise 是用來優化非同步的語法。

• • Promise 物件狀態
    • pending: 初始狀態
    • fulfilled: 操作成功
    • rejected: 操作失敗
• Promise 事件成功或失敗所對應的方法
  • resolve(): 傳送成功的訊息
  • reject(): 傳送失敗的訊息
• 狀態連接處理
  • then(): 接收 resolve 的訊息
  • catch(): 接收 reject 的訊息
• 其他方法
  • Promise.race():
    • 傳入多個 promise 事件，僅會回傳第一個完成的事件(不論成功與否，只要完成即回傳)
    • 任何一事件完成就會進入下一階段，第一個事件完成後其他事件依舊執行，並不停擺
  • Promise.all():
    • 傳入多個 promise 事件，在全部完成後才進行下一步
    • 只要有任一 promise 事件 reject，立即回傳 rejected 狀態 promise 物件
    • 若事件都成功，會回傳陣列

程式基本架構

let factor = true   //非同步事件的成功與否
let condition = function(something) {
   return new Promise(function (resolve, reject) {
     if(something) {
         resolve("成功了");
     } else {
         reject('失敗QQ');
     }
   });
}
//-----------------------可簡寫成以下------------------------
/*
let condition = function(something) {
     if(something) {
        return  Promise.resolve("成功了");
     } else {
        return Promise.reject('失敗QQ');
     }
   }
*/
//----------------------------------------------------------
condition(factor)
.then(function(val) {
   console.log(val);
})
.catch(function(err) {
   console.log(err);
});

Promise Chain

• 當要依序處理非同步事件時，使用 .then 串接，並在最尾端接上 .catch
• 若其中一次失敗，.catch只會接到第一個失敗的訊息，而後不繼續執行。若是要跳過錯誤繼續執行，則將 Promise.reject 前的 return 去除，即可

let factor = true   //非同步的事件成功與否
let factor2 = false


let condition = function(something,num) {
     if(something) {
        return  Promise.resolve('第'+ num +"次成功了");
     } else {
        return Promise.reject('第'+ num +'次失敗QQ');
     }
}

condition(factor,1)
.then(function(val) {
   console.log('1.'+val);
   return condition(factor2,2)
})
.then(function(val) {
   console.log('2.'+val);
   return condition(factor,3)
})
.then(function(val) {
   console.log('3.'+val);
   return condition(factor,4)
})
.then(function(val) {
   console.log('4.'+val);
})
.catch(error => console.log('錯誤訊息', error))

Promise.race()範例

let factor = true   //非同步的事件成功與否
let factor2 = false

let condition = function(something,num) {
 return new Promise((resolve,reject)=>{
   setTimeout(function(){
     if(something) {
         resolve('第'+ num +".先成功了");
     } else {
         reject('第'+ num +'次失敗QQ');
     }
   },Math.floor(Math.random() * 10)*1000)
 })
}

Promise.race([condition(factor2,1),condition(factor,2),condition(factor,3)])
.then((res)=>{
 console.log(res)
 }
).catch(err => {
 console.log(err)
});

Promise.all()範例

//------------------------皆為成功的前提下--------------------------

let factor = true   //非同步的事件成功與否
let factor2 = false
let timer = Math.floor(Math.random() * 5)*1000
let condition = function(something,num) {
 return new Promise((resolve,reject)=>{
   setTimeout(function(){
     if(something) {
         resolve('第'+ num +".先成功了花了"+timer+'秒');
     } else {
         reject('第'+ num +'次失敗QQ');
     }
   },timer)
 })
}

Promise.all([condition(factor,1),condition(factor,2),condition(factor,3)])
.then((res)=>{
 console.log(res)
 }
).catch(err => {
 console.log(err)
});

//-------------------------------其中一個失敗狀況下--------------------

let factor = true   //非同步的事件成功與否
let factor2 = false
let timer = Math.floor(Math.random() * 5)*1000
let condition = function(something,num) {
 return new Promise((resolve,reject)=>{
   setTimeout(function(){
     if(something) {
         resolve('第'+ num +".先成功了花了"+timer+'秒');
     } else {
         reject('第'+ num +'次失敗QQ');
     }
   },timer)
 })
}

Promise.all([condition(factor,1),condition(factor2,2),condition(factor,3)])
.then((res)=>{
 console.log(res)
 }
).catch(err => {
 console.log(err)
});